// banner区域轮播图特效
(function () {
    // 得到id为"banner","pic-list","circle-list"标签的元素节点
    var pic_list = document.getElementById('pic-list');
    var circle_list = document.getElementById('circle-list');
    var banner = document.getElementById('banner');
    // 设置一个全局变量n，为当前图片的序号，图片的序号依次为0，1，2
    var n = 0;
    // 设置right函数
    function right() {
        // 执行一次n+1，当n的值为3时再次让n赋值为0
        n++;
        if (n == 3) n = 0;
        // 让pic_list元素的样式设为X方向移动“-n*33.33%”
        pic_list.style.transform = 'translateX(' + -n * 33.33 + '%)';
        // 先遍历circle_list(小圆点列表)的子元素，让每个子元素的className都设置为''
        for (var i = 0; i < circle_list.children.length; i++) {
            circle_list.children[i].className = '';
        }
        // 再让下标为n的circle_list的子元素的className设置为'current'
        circle_list.children[n].className = 'current';
    }
    // 设置一个全局变量timer
    var timer;
    // 设置timer为一个定时器，每2s执行一次right函数
    timer = setInterval(right, 2000);
    // 设置一个事件监听，当鼠标进入banner区域时，清除定时器timer
    banner.onmouseenter = function () {
        clearInterval(timer);
    }
    // 设置一个事件监听，当鼠标离开banner区域时再次设置timer为定时器
    banner.onmouseleave = function () {
        // 设表先关
        clearInterval(timer);
        // 再次设置timer为定时器
        timer = setInterval(right, 2000);
    }
    // 当鼠标点击circle_list里的小圆点时，给circle_list设置事件委托
    circle_list.onclick = function (e) {
        // 当被点击的源元素的tagName转换为小写后的值是'li'时
        if (e.target.tagName.toLowerCase() == 'li') {
            // 将被点击的小圆点的data-n属性的值赋值给全局变量n
            n = e.target.getAttribute('data-n');
            // 让pic_list元素的样式设为X方向移动“-n*33.33%”
            pic_list.style.transform = 'translateX(' + -n * 33.33 + '%)';
            // 先遍历circle_list(小圆点列表)的子元素，让每个子元素的className都设置为''
            for (var i = 0; i < circle_list.children.length; i++) {
                circle_list.children[i].className = '';
            }
            // 再让下标为n的circle_list的className设置为'current'
            circle_list.children[n].className = 'current';
        }
    }
})();